<template>
  <div class='container'  style='margin-top: 80px'>
    <div class='row'>
      <div class='col-md-8' style='border-right: 1px solid #000'>
        <h1 class='colorful' @click='addCount'>{{ saySomething }}</h1>
      </div>
      <div class='col-md-4'>
        <div class='card'>
          <div class='card-body'>
            <h4>恭喜！</h4>
            你找到了彩色的蛋，但这不是彩蛋！<br>
            但是这确实解锁了彩蛋
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Timecard from './Timecard'
export default {
  name: 'Nav',
  data () {
    return {
      msg: '2333',
      counter: 0,
      saySomething: 'colorful 蛋'
    }
  },
  methods: {
    Rand: function () {
      return Math.floor(Math.random()*2147483647)
    },
    showSomething: function () {
      this.saySomething = 'Yemaster love ???'
    },
    addCount: function () {
      ++this.counter;
      if (this.counter > 10) {
        this.showSomething();
      }
    }
  }
}
</script>

<style>
.colorful {
    animation: colorful-change 10s linear 0s infinite;
}

@keyframes colorful-change {
    0% {
        color: #17C671 !important;
    }
    20% {
        color: #0067F4 !important;
    }
    40% {
        color: #C4183C !important;
    }
    60% {
        color: #FFB400 !important;
    }
    80% {
        color: #E9ECEF !important;
    }
    100% {
        color: #17C671 !important;
    }
}
</style>
